<template>
    <div class="now-container" :style="{background:(index%2==0?'rgb(52, 51, 50)':'rgb(80,80,80)')}">
        <div class="index">{{index}}</div>
        <div class="name">{{name}}</div>
        <div class="arts">{{getArts(arts)}}</div>
    </div>
</template>

<script>
export default {
    name: "singleNowSong",
    props:['index', 'name', 'id', 'arts', 'album'],
    setup(props) {
        function getArts() {
            let arr = []
            for (let item of props.arts) {
                arr.push(item.name)
            }
            return arr.join('/')
        }

        return {
            getArts
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../../style";

    .now-container {
        .inner-pos(between);
        width: 100%;
        height: 30px;
        color: white;
        font-size: 12px;
        .index{
            .inner-pos(none);
            height: 100%;
            width: 30px;
        }

        .name {
            padding: 3px 0 0 0;
            height: calc(100% - 3px);
            width: 37%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
        }

        .arts {
            padding: 3px 0 0 0;
            height: calc(100% - 3px);
            width: 37%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
        }
    }
</style>